<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="home">
{
  "layout": "tabbar",
  "style": {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    "navigationStyle": "custom",
    "navigationBarTitleText": "首页"
  }
}
</route>

<script lang="ts" setup>
import dayjs from 'dayjs'
import { computed, onMounted } from 'vue'
import { useSupabaseCoupleStore } from '@/store/supabaseCouple'

defineOptions({
  name: 'Home',
})

const coupleStore = useSupabaseCoupleStore()

// 获取屏幕边界到安全区域距离
let safeAreaInsets
let systemInfo

// #ifdef MP-WEIXIN
// 微信小程序使用新的API
systemInfo = uni.getWindowInfo()
safeAreaInsets = systemInfo.safeArea
  ? {
      top: systemInfo.safeArea.top,
      right: systemInfo.windowWidth - systemInfo.safeArea.right,
      bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
      left: systemInfo.safeArea.left,
    }
  : null
// #endif

// #ifndef MP-WEIXIN
// 其他平台继续使用uni API
systemInfo = uni.getSystemInfoSync()
safeAreaInsets = systemInfo.safeAreaInsets
// #endif

// 计算恋爱天数
const loveDays = computed(() => {
  if (!coupleStore.profile?.relationshipStart)
    return 0
  return dayjs().diff(dayjs(coupleStore.profile.relationshipStart), 'day')
})

// 下个纪念日
const nextAnniversary = computed(() => {
  const upcoming = coupleStore.upcomingAnniversaries[0]
  if (!upcoming)
    return null
  const anniversaryDate = dayjs(upcoming.date)
  const thisYear = dayjs().year()
  let nextDate = anniversaryDate.year(thisYear)
  if (nextDate.isBefore(dayjs(), 'day')) {
    nextDate = nextDate.year(thisYear + 1)
  }
  return {
    title: upcoming.title,
    daysLeft: nextDate.diff(dayjs(), 'day'),
  }
})

// 总照片数
const totalPhotos = computed(() => {
  return coupleStore.albums?.reduce((total, album) => total + (album.photos?.length || 0), 0) || 0
})

// 快捷功能 - Hello Kitty 可爱风格
const quickActions = [
  { title: '发布动态 📝', icon: 'edit', url: '/pages/moments/publish', emoji: '🌸' },
  { title: '添加纪念日 💕', icon: 'calendar', url: '/pages/anniversary/index', emoji: '🎀' },
  { title: '记录约会 💖', icon: 'location', url: '/pages/date-records/index', emoji: '🌺' },
  { title: '添加愿望 ⭐', icon: 'star', url: '/pages/wishlist/index', emoji: '🎈' },
]

function goTo(url: string) {
  uni.navigateTo({ url })
}

function goToProfile() {
  uni.switchTab({ url: '/pages/profile/index' })
}

// 测试 uni API 自动引入
onLoad(() => {
  console.log('情侣记录小程序首页')
})

onMounted(() => {
  coupleStore.initProfile()
})
</script>

<template>
  <view class="container">
    <!-- 自定义导航栏 -->
    <view class="navbar" :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
      <view class="navbar-title">
        🎀 甜蜜记录 🎀
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content">
      <!-- 情侣信息卡片 -->
      <view v-if="coupleStore.profile" class="couple-card" @click="goToProfile">
        <view class="couple-avatars">
          <image :src="coupleStore.profile.user1.avatar" class="avatar he-avatar" mode="aspectFill" />
          <view class="heart">
            💕
          </view>
          <image :src="coupleStore.profile.user2.avatar" class="avatar she-avatar" mode="aspectFill" />
        </view>
        <view class="couple-names">
          {{ coupleStore.profile.user1.name }} & {{ coupleStore.profile.user2.name }}
        </view>
        <view class="love-days">
          相恋第 {{ loveDays }} 天
        </view>
        <view v-if="nextAnniversary" class="next-anniversary">
          距离{{ nextAnniversary.title }}还有 {{ nextAnniversary.daysLeft }} 天
        </view>
      </view>

      <!-- 统计卡片 -->
      <view class="stats-grid">
        <view class="stat-item">
          <view class="stat-num">
            {{ totalPhotos }}
          </view>
          <view class="stat-label">
            照片
          </view>
        </view>
        <view class="stat-item">
          <view class="stat-num">
            {{ coupleStore.wishlist?.length || 0 }}
          </view>
          <view class="stat-label">
            愿望
          </view>
        </view>
        <view class="stat-item">
          <view class="stat-num">
            {{ coupleStore.dateRecords?.length || 0 }}
          </view>
          <view class="stat-label">
            约会
          </view>
        </view>
        <view class="stat-item">
          <view class="stat-num">
            {{ coupleStore.gifts?.length || 0 }}
          </view>
          <view class="stat-label">
            礼物
          </view>
        </view>
      </view>

      <!-- 快捷功能 -->
      <view class="quick-actions">
        <view class="section-title">
          快捷功能
        </view>
        <view class="actions-grid">
          <view v-for="action in quickActions" :key="action.title" class="action-item" @click="goTo(action.url)">
            <view class="action-emoji">
              {{ action.emoji }}
            </view>
            <text class="action-title">{{ action.title }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #fff0f5;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255, 228, 225, 0.4) 2px, transparent 0),
    radial-gradient(circle at 75% 75%, rgba(255, 228, 225, 0.4) 2px, transparent 0);
  background-size: 20px 20px;
  position: relative;
}

.navbar {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(15px);
  padding: 12px 16px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 135, 171, 0.15);
  position: sticky;
  top: 0;
  z-index: 100;

  .navbar-title {
    font-size: 18px;
    font-weight: bold;
    color: #ff69b4;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
  }
}

.content {
  padding: 16px;
  position: relative;
  z-index: 1;
}

.card-base {
  background: #ffffff;
  border-radius: 24px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow:
    0 4px 16px rgba(255, 105, 180, 0.1),
    0 10px 30px rgba(255, 105, 180, 0.15);
  border: 1px solid white;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow:
      0 6px 20px rgba(255, 105, 180, 0.15),
      0 15px 40px rgba(255, 105, 180, 0.2);
  }
}

.couple-card {
  @extend .card-base;
  text-align: center;

  .couple-avatars {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;

    .avatar {
      width: 68px;
      height: 68px;
      border-radius: 50%;
      border: 4px solid #ffc2d1;
      box-shadow: 0 5px 15px rgba(255, 105, 180, 0.2);

      &.he-avatar {
        animation: float-left 4s ease-in-out infinite;
      }

      &.she-avatar {
        animation: float-right 4s ease-in-out infinite 1.5s;
      }
    }

    .heart {
      font-size: 32px;
      margin: 0 10px;
      animation: heart-beat 1.2s ease-in-out infinite;
      text-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
    }
  }

  .couple-names {
    font-size: 22px;
    font-weight: bold;
    color: #444;
    margin-bottom: 8px;
  }

  .love-days {
    font-size: 17px;
    color: #ff69b4;
    font-weight: 600;
    margin-bottom: 12px;
  }

  .next-anniversary {
    font-size: 13px;
    color: #ff69b4;
    background-color: #fff0f5;
    padding: 6px 14px;
    border-radius: 16px;
    display: inline-block;
    border: 1px solid #ffdde5;
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;

  .stat-item {
    background: #ffffff;
    border-radius: 18px;
    padding: 16px 8px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(255, 135, 171, 0.12);
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(255, 135, 171, 0.18);
    }

    .stat-num {
      font-size: 24px;
      font-weight: bold;
      color: #ff69b4;
      margin-bottom: 4px;
    }

    .stat-label {
      font-size: 12px;
      color: #999;
    }
  }
}

.quick-actions {
  @extend .card-base;

  .section-title {
    font-size: 18px;
    font-weight: bold;
    color: #444;
    margin-bottom: 20px;
    text-align: center;
  }

  .actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;

    .action-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px 16px;
      background: linear-gradient(145deg, #fff4f7, #ffeef0);
      border-radius: 20px;
      transition: all 0.3s ease;
      border: 1px solid white;
      box-shadow: 0 5px 15px rgba(255, 135, 171, 0.1);
      cursor: pointer;

      &:hover {
        transform: translateY(-5px) scale(1.03);
        box-shadow: 0 10px 25px rgba(255, 135, 171, 0.2);
      }

      .action-emoji {
        font-size: 36px;
        margin-bottom: 10px;
        filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.06));
      }

      .action-title {
        font-size: 13px;
        color: #ff69b4;
        font-weight: 600;
        text-align: center;
      }
    }
  }
}

/* 动画效果 */
@keyframes float-left {
  0%,
  100% {
    transform: translateY(0) rotate(-4deg);
  }

  50% {
    transform: translateY(-8px) rotate(4deg);
  }
}

@keyframes float-right {
  0%,
  100% {
    transform: translateY(0) rotate(4deg);
  }

  50% {
    transform: translateY(-8px) rotate(-4deg);
  }
}

@keyframes heart-beat {
  0%,
  100% {
    transform: scale(1);
  }

  10%,
  30% {
    transform: scale(0.95);
  }

  20%,
  40%,
  60%,
  80% {
    transform: scale(1.15);
  }

  50%,
  70%,
  90% {
    transform: scale(1.05);
  }
}
</style>
